<script lang="ts" setup>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'
import utils from '@/utils'

// Import Swiper styles
import 'swiper/css'

import 'swiper/css/pagination'
import 'swiper/css/navigation'

import { Autoplay, Navigation, Pagination } from 'swiper/modules'

const modules = [Autoplay, Pagination, Navigation]
const caseList = [{
  img: 'product/t13.png',
  tags: ['印刷行业'],
  title: '协作机器人印刷业上下料应用',
  time: '2024-03-21',
},
{
  img: 'product/t14.png',
  tags: [ '喷墨打印'],
  title: 'EC612印刷行业异形曲面喷墨打印',
  time: '2024-03-21',
}, {
  img: 'product/t15.png',
  tags: ['印刷行业'],
  title: 'EC66印刷行业书脊胶装应用',
  time: '2024-03-21',
}, {
  img: 'product/t16.png',
  tags: ['纺织'],
  title: 'EC612纺织行业纱锭装箱应用',
  time: '2024-03-21',
}, {
  img: 'product/t17.png',
  tags: ['航天航空', '无人机'],
  title: '协作机器人为无人机智能机库更换电池',
  time: '2024-03-21',
}, {
  img: 'product/t18.png',
  tags: ['恶劣环境'],
  title: '协作协作机器人用于航空领域发动机零部件上下料',
  time: '2024-03-21',
}, {
  img: 'product/t19.png',
  tags: ['轨道检测'],
  title: '协作机器人用于轨道板检测应用',
  time: '2024-03-21',
}, {
  img: 'product/t20.png',
  tags: ['地铁', '民生'],
  title: '复合机器人地铁轨道瑕疵检测应用',
  time: '2024-03-21',
}, {
  img: 'product/t21.png',
  tags: ['管材搬运'],
  title: 'EC66协作机器人用于农业塑料管材搬运',
  time: '2024-03-21',
}, {
  img: 'product/t22.png',
  tags: ['施工监测'],
  title: '协作机器人用于TBM施工中的微震监测',
  time: '2024-03-21',
}]
const swiperOption = {
  speed: 5000,
  loop: true,
  autoplay: {
    delay: 0,
    stopOnLastSlide: false,
    disableOnInteraction: false,
  },
  slidesPerView: 4,
  freeMode: true,
  loopFillGroupWithBlank: true,
  normalizeSlideIndex: true,
}
</script>

<template>
  <Swiper
    :space-between="30" :centered-slides="true" :rewind="true" :modules="modules" v-bind="swiperOption" class="mySwiper"
    :style="{
      '--swiper-navigation-color': '#1677ff',
      '--swiper-wrapper-transition-timing-function': 'linear',
    }"
  >
    <SwiperSlide v-for="(li, index) in caseList" :key="index">
      <div class="li">
        <div class="img-box">
          <img :src="utils.getImg(li.img)" class="img">
        </div>
        <div class="li-content">
          <div class="li-title">
            {{ li.title }}
          </div>
          <div class="li-tags">
            <div v-for="(tag, index) in li.tags" :key="index" class="tag">
              {{ tag }}
            </div>
          </div>
          <div class="li-time">
            {{ li.time }}
          </div>
        </div>
      </div>
    </SwiperSlide>
  </Swiper>
</template>

<style lang="scss" scoped>
	.left-line{
		width: 10px;
		height: 100%;
		box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
		background-color: #666;
	}
	.li {
		width: 290px;
		cursor: pointer;
		box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);

		.img-box {
			width: 290px;
			height: 220px;
			overflow: hidden;

			.img {
				width: 290px;
				height: 220px;
			}
		}

		.li-content {
			padding: 10px;

			.li-title {
				font-size: 18px;
				line-height: 25px;
				height: 50px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.li-tags{
				margin-top: 15px;
					display: flex;
				.tag{
					width: 74px;
					text-align: center;
					margin-right: 10px;
					border: 1px solid #EEEDEF;
					padding: 8px;
					color: #666;
					border-radius: 30px;
					font-size: 14px;
				}
			}
			.li-time {
				color: #666;
				margin-top: 15px;
				line-height: 25px;
				font-size: 14px;
			}
		}

	}

	.li:hover {
		.img {
			animation: img-scale 0.2s linear forwards;
		}
	}

	@keyframes img-scale {
		0% {
			transform: scale(1);
		}

		100% {
			transform: scale(1.1);
		}
	}

	.swiper {
		padding-bottom: 20px;
	}

	.swiper-slide {
		font-size: 18px;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.swiper-slide img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>
